@import "../vars";
@import "../mixin";

$--header-height: 72px;
.top-header {
  height: $--header-height;
  padding: 0 10px 0 0;
  font-size: 0;
  &__logo {
    @include inline-block;
    width: 84px;
    text-align: center;
    height: $--header-height;
    cursor: pointer;
    img {
      width: 54px;
      margin: 10px 0px 0px 27px;
    }
  }
  &__title {
    @include inline-block;
    line-height: $--header-height;
    font-size: 32px;
    min-width: 250px - 64px;
    span {
      margin-left: 10px;
      cursor: pointer;
    }
  }
  &__tools {
    text-align: right;
    height: $--header-height;
    user-select: none;
    font-size: 14px;
    position: relative;
    .tool-item {
      position: absolute;
      width: 320px;
      height: 50px;
      border-radius: 30px;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      .tool-item-info {
        height: 100%;
        float: left;
        font-size: 18px;
        margin: 10px 0px 0px 10px;
      }
      .tool-item-icon {
        height: 100%;
        float: right;
        margin: 12px 10px 0px 0px;
        i {
          cursor: pointer;
          font-size: 28px;
        }
      }
    }
  }
}

